<template>
  <div class="container">
    <!-- <div class="box">
      <header class="header">header</header>
      <div class="content">content</div>
    </div> -->
    <router-view></router-view>
    <footer class="footer">
      <ul>
        <router-link to = "/home" tag="li">
          <span class="iconfont icon-shouye"></span>
          <p>首页</p>
        </router-link>
        <router-link to = "/kind" tag="li">
          <span class="iconfont icon-2"></span>
          <p>分类</p>
        </router-link>
        <router-link to = "/cart" tag="li">
          <span class="iconfont icon-icon-"></span>
          <p>购物车</p>
        </router-link>
        <router-link to = "/user" tag="li">
          <span class="iconfont icon-daohanglan-05"></span>
          <p>我的</p>
        </router-link>
      </ul>
    </footer>
  </div>
</template>

<style lang="scss">
* { padding: 0; margin: 0; list-style: none;}
html, body, .container { height: 100%; }
.container {
  // 弹性盒布局 --- flex 布局
  display: flex;
  flex-direction: column; // 垂直方向上的弹性盒布局
  .box {
    flex: 1; // 除了底部所有的区域都属于它
    display: flex;
    flex-direction: column;
    overflow: auto;
    .header { height: 44px; background-color: #f66;}
    .content { flex: 1; overflow: auto;}
  }
  .footer {
    height: 50px;
    background-color: #ccc;
    ul {
      display: flex;
      height: 100%;
      li {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &.router-link-active {
          color: #f66;
        }
        span {
          font-size: 22px;
        }
        p {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
